<template>
  <header class="Header" :class="homeFlag?'is-home border':'not-home'">
    <div class="center-block">
      <div class="head-top clearfix">
        <div class="pull-left logo">
          <router-link to="/home">
            <img :src="homeFlag?require('../assets/images/logo.png'): require('../assets/images/zlogo.png')" alt="" />
            <span class="sub-title" v-if="subTitle">{{subTitle}}</span>
          </router-link>
        </div>
        <div class="pull-right">
          <p class="headDes"><a href="#">登录</a> |  <router-link to="/helpCenter">帮助中心</router-link></p>
        </div>
      </div>
      <ul class="head-nav clearfix" >
        <li v-for="(value,index) in menuList" :key="index">
          <router-link :target="value.target" :to="value.url">{{value.name}}</router-link>
        </li>
      </ul>
    </div>
  </header>
</template>
<script>
export default {
  name: "Header",
  data () {
    return {
      paths: [], // 当前路由url “/”分割的集合
      menuList: [],
      menuConfig: {
        menuHomeList : [
          {
            name: "首页", url: "/home", target: "_self"
          },
          {
            name: "政务服务", url: "/govService", target: "_self"
          },
          {
            name: "项目审批", url: "/projectApproval", target: "_blank"
          },
          {
            name: "信息公开", url: "/information", target: "_self"
          },
          {
            name: "中介服务", url: "/agency", target: "_blank"
          },
          {
            name: "数据服务", url: "/dataService", target: "_self"
          }
        ],
        menuAgencyList : [
          {
            name: "首页", url: "/agency/agencyHome", target: "_self"
          },
          {
            name: "中介机构", url: "/agency/agencyList", target: "_self"
          },
          {
            name: "信用评价", url: "/agency/creditList", target: "_self"
          },
          {
            name: "专家名录", url: "/agency/expertList", target: "_self"
          },
          {
            name: "评审公示", url: "/agency/reviewList", target: "_self"
          },
          {
            name: "政策法规", url: "/agency/policyList", target: "_self"
          },
          {
            name: "下载专区", url: "/agency/download", target: "_self"
          }
        ],
        menuApprovalList : [
          {
            name: "首页", url: "/projectApproval/approvalHome", target: "_self"
          },
          {
            name: "办事大厅", url: "/projectApproval/officeHall", target: "_self"
          },
          {
            name: "办事指南", url: "/projectApproval/guidance", target: "_self"
          },
          {
            name: "办件查询", url: "/projectApproval/queryList", target: "_self"
          },
          {
            name: "信息公开", url: "/projectApproval/informations", target: "_self"
          },
          {
            name: "政策法规", url: "/projectApproval/policyList", target: "_self"
          }
        ]
      }
    }
  },
  mounted () {
    this.initRouter(this.$route.path)
  },
  computed: {
    // 是否为首页
    homeFlag() {
      let paths = this.paths;
      return paths[1] == 'home' || ['agencyHome', 'approvalHome', 'dataHome'].indexOf(paths[2]) !== -1 ?
        true: false;
    },
    // 副标题
    subTitle() {
      let paths = this.paths;
      return ['agencyHome', 'approvalHome', 'policyDetails'].indexOf(paths[2]) === -1? "":
        (paths[2]==="agencyHome"? "中介服务":"江西省工程建设项目联合审批平台");
    }
  },
  methods: {
    // 根据不同的新开窗口初始化 menus
    initRouter() {
      let { paths, menuConfig:{ menuHomeList, menuAgencyList, menuApprovalList} } = this;
      if (paths[1]=='agency') {
        this.menuList = menuAgencyList
      } else if (paths[1]=='projectApproval') {
        this.menuList = menuApprovalList
      } else {
        this.menuList = menuHomeList
      }
    },
  },
  watch: {
    $route: {
      handler({ path }) {
        let paths = path.split('/');
        this.paths = paths;
        this.initRouter();
      },
      immediate: true,
      deep:true
    }
  }
}
</script>

<style lang="less" scoped>
.Header {
  padding: 20px 0 0 0;
  height: 122px;
  box-sizing: border-box;
  &.border {
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  // 是home页面
  &.is-home {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    .center-block {
      .head-top {
        .pull-left{
          .sub-title {
            border-left: 1px solid #E6E6E6;
            color: #fff;
          }
        }
        .pull-right {
          .headDes {
            color: #C8E0FF;
            padding-top: 10px;
          }
        }
      }
      .head-nav {
        li a{
          color: #ffffff;
        }
        li a:after {
          background-color: #ffffff;
        }
      }
    }
  }
  // 不是home页面
  &.not-home {
    .center-block {
      .head-top {
        .pull-right {
          .headDes {
            color: #666666;
            padding-top: 10px;
          }
        }
      }
      .head-nav {
        li a{
          color: #181F2A
        }
        li a:after {
          background-color: #216DE5;
        }
      }
    }
  }
  // 通用
  .center-block {
    width: 1180px;
    margin: 0 auto;
    .head-top {
      margin-bottom: 33px;
      .pull-left  {
        float: left;
        transform: translateX(-3px);
        .sub-title {
          display: inline-block;
          height: 30px;
          font-size: 18px;
          vertical-align: middle;
          line-height: 30px;
          padding: 0 20px;
          margin-left: 20px;
        }
      }
      .pull-right {
        float: right;
      }
    }
    .head-nav {
      li {
        float: left;
        margin-right: 55px;
        a {
          height: 32px;
          font-size: 16px;
          position: relative;
          display: inline-block;
        }
        a:after {
          content: '';
          display: none;
          width: 100%;
          height: 3px;
          position: absolute;
          left: 0;
          top: 32px;
        }
        a.router-link-active:after {
          display: block;
        }
      }
    }
  }
}
</style>
